<template>
  <SysDialog
      :title="dialog.title"
      :width="dialog.width"
      :visible="dialog.visible"
      :height="dialog.height"
      @on-c-lose="onClose"
      @on-confirm="commit"
  >
    <template v-slot:content>
      <el-tree
          ref="assignTree"
          node-key="menuId"
          style="max-width: 600px"
          :data="assignTreeData.list"
          :props="props"
          show-checkbox
          :default-checked-keys="assignTreeData.checked"
          default-expand-all
      />
    </template>
  </SysDialog>
</template>

<script setup lang="ts">
//树数据
import {getAssignTreeApi} from "@/api/menu";
import {reactive, ref} from "vue";
import useDialog from '@/hocks/useDialog.ts'
import SysDialog from "@/components/SysDialog.vue";
import {saveRoleMenuApi} from "@/api/role";
import {type ElTree, ElMessage} from 'element-plus'

//树的属性配置
const props = {
  children: 'children',
  label: 'title',
}

const {dialog, onShow, onClose} = useDialog()
const params = reactive({
  userId: '',
  roleId: ''
})

const assignTreeData = reactive({
  list: [],
  checked: []
})

const check = (id: number, data: any, newArr: any) => {
  data.forEach((item: any) => {
    if (item.menuId == id) {
      if (item.children && item.children.length == 0) {
        newArr.push(item.menuId)
      }
    } else {
      if (item.children && item.children.length != 0) {
        check(id, item.children, newArr)
      }
    }
  })
}
//查询菜单树
const getAssignTree = async () => {
  let res = await getAssignTreeApi(params)
  if (res && res.code == 200) {
    assignTreeData.list = res.data.menuList
    assignTreeData.checked = res.data.checkList
    //数据回显,先判断角色原来是否已经分配过权限，如果有，则回显
    if (assignTreeData.checked && assignTreeData.checked.length > 0) {
      let newArr: any = []
      assignTreeData.checked.forEach((item => {
        check(item, assignTreeData.list, newArr)
      }))
      assignTreeData.checked = newArr
    }
  }
}
const saveMenuParam = reactive(
    {
      roleId: '',
      menuIds: [] as string[]
    }
)
//显示弹框
const show = async (userId: string, roleId: string, name: string) => {
  saveMenuParam.roleId = roleId
  assignTreeData.checked = []//清空选中
  assignTreeData.list = []
  saveMenuParam.menuIds = []
  params.roleId = roleId
  params.userId = userId
  dialog.height = 450
  dialog.width = 300
  dialog.title = '为【' + name + '】分配菜单'
  await getAssignTree()
  onShow()
}
//暴露给外部使用
defineExpose({
  show
})

const assignTree = ref<InstanceType<typeof ElTree>>()
const commit = async () => {
  //获取已经选中的内容
  const checkedKeys = assignTree.value?.getCheckedKeys()
  const halfCheckedKeys = assignTree.value?.getHalfCheckedKeys() as string[]
  let ids = checkedKeys?.concat(halfCheckedKeys) as string[]
  saveMenuParam.menuIds = ids
  //判断是否已经选择
  if (ids.length == 0) {
    ElMessage.error("请选择菜单")
    return
  }
  let res = await saveRoleMenuApi(saveMenuParam)
  if (res && res.code == 200) {
    ElMessage.success(res.msg)
    onClose()
  }
}
</script>

<style scoped>

</style>